<template>
	<view>
		<view class="nav_bar">
			<view class="search items-center justify-betwee">
				<u-icon size="40" name="search"></u-icon>
				<input style="margin-left: 30rpx;" v-model="valueKey" @confirm="pageNo = 1 ,listFn()" type="text" placeholder="搜索充电站名称">
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="item-top" v-if="type == '1'">
						<view class="item-title items-center">
							<image style="width: 34rpx;height: 27rpx;margin-right: 20rpx;" src="../../static/img/cart-icon.png" mode=""></image>
							<view>{{item.name}}</view>
						</view>
						<view class="flex-row items-center justify-between">
							<view class="">
								<view class="items-center" style="flex-wrap: wrap;width: 100%;">
									<view class="item-d" style="margin-right: 10rpx;" v-for="it in item.labelList" :key="item.id">
										<image style="width: 25rpx;height: 25rpx;margin-right: 10rpx;" :src="it.icon" mode=""></image>
										<text>{{it.content}}</text>
									</view>
								</view>
								<view style="padding: 10rpx 0;">
									<text class="item-price">{{item.price}}</text>
									<text class="item-u">起元/度</text>
								</view>
								<view class="flex-row items-center">
									<image src="/static/img/tc.png" mode="" class="p-icon"></image>
									<text class="item-c">{{item.parkingInfo}}</text>
								</view>
							</view>
						</view>
						<view style="margin-top: 20rpx;" class="flex-row items-center justify-between">
							<view class="flex-row items-center" v-if="item.canUse">
								<view class="btn one">快</view>
								<view style="margin-left: 20rpx;">
									<text class="bottom-text text-1" v-if="item.unused">空闲{{item.unused}}/</text>
									<text class="bottom-text">共{{item.canUse}}</text>
								</view>
							</view>
							<view class="flex-row items-center" v-if="item.canUseSlowly">
								<view class="btn two">慢</view>
								<view style="margin-left: 20rpx;">
									<text style="color: #446CB2;" class="bottom-text" v-if="item.unusedSlowly">空闲{{item.unusedSlowly}}/</text> 
									<text class="bottom-text">共{{item.canUseSlowly}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item-top" v-if="type == '2'">
						<view class="item-title items-center">
							<image style="width: 34rpx;height: 27rpx;margin-right: 20rpx;" src="../../static/img/cart-icon-2.png" mode=""></image>
							<view>{{item.name}}</view>
						</view>
						<view style="margin-top: 10rpx;">
							<view class="item-c">
								{{item.address}}
							</view>
							<view style="padding: 10rpx 0;" class="items-center justify-between">
								<view class="left">
									<text class="item-price">{{item.price}}</text>
									<text class="item-u">元/小时</text>
								</view>
								<view class="right">
									<text class="bottom-text text-1">空闲{{item.unused || 0}}/</text>
									<text class="bottom-text">共{{item.canUse}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item-bottom flex-row items-center justify-end">
						<view class="btn btn-1" @click.stop="handleManage(item)">
							充电桩管理
						</view>
						<view class="btn" @click="navTo('./addoredit?type='+type+'&stor=2&id='+item.id)">
							编辑信息
						</view>
					</view>
				</view>
				<u-empty margin-top="150" v-if="list.length < 1" text="数据为空" mode="list"></u-empty>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="navTo('./addoredit?type='+type+'&stor=1')">
				新建充电站
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				type:'1',
				valueKey:'',
				count:1,
				pageNo:1
			};
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type
				e.type == '2' ? this.setNavTitle('电动车充电站') : this.setNavTitle('汽车充电站')
			}
			this.listFn()
		},
		onPullDownRefresh() {
			this.listFn()
		},
		onReachBottom() {
			this.count > this.pageNo ? (this.pageNo++,this.listFn()) : ''
		},
		methods:{
			handleManage(item){
				this.navTo(`./pile?type=${this.type}&id=${item.id}`)
			},
			async listFn(){
				let data = {
					uid:uni.getStorageSync('uid'),
					key:this.valueKey,
					pageNo:this.pageNo,
					pageSize:10
				}
				var url = ''
				this.type == '1' ? url = 'user/zz-station-list' : url = 'user/zz-station-list-two'
				let res = await this.$request(url,data,{ showLoading: true })
				uni.stopPullDownRefresh()
				if(res.result == '0'){
					res.data.list.forEach(el=>{
						this.$set(el,'labelList',[])
						if(el.lable && el.lable.icon && el.lable.id && el.lable.content){
							let icon = el.lable.icon.split(',')
							let id = el.lable.id.split(',')
							let content = el.lable.content.split(',')
							for(var i = 0; i < id.length; i++){
								el.labelList.push({
									icon:icon[i],
									id:id[i],
									content:content[i]
								})
							}
						}
					})
					this.count = Math.ceil(res.data.count / 10)
					this.pageNo > 1 ? this.list = this.list.concat(res.data.list) : this.list = res.data.list
				}else{
					this.$util.msg(res.resultNote)
				}
			}
		},
	}
</script>

<style lang="scss" scoped> 
	.nav_bar{
		background: $uni-color-bg;
		padding: 30rpx 50rpx;
		.search{
			width: 620rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin: 0 auto;
		}
	}
	.content{
		padding: 20rpx;
		padding-bottom: 250rpx;
		.list{
			.item {
				background: #ffffff;
				border: 1rpx solid rgba(218, 218, 218, 0.18);
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.item-top {
					padding: 30rpx;
					.item-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333333;
					}
					.btn {
						width: 89rpx;
						height: 48rpx;
						text-align: center;
						border-radius: 24px;
						line-height: 48rpx;
						font-size: 26rpx;
						font-weight: 500;
					}
					
					.two {
						background: #246697;
						color: #ffffff;
					}
					.bottom-text {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}
					.icon {
						width: 58rpx;
						height: 58rpx;
					}
					.one {
						background: $uni-color-bg;
						color: #FFF;
					}
					.text-1{
						color: $uni-color-bg;
					}
				}
				.item-d {
					font-size: 20rpx;
					font-weight: 500;
					color: #a9a9a9;
				}
				.item-price {
					font-size: 36rpx;
					font-weight: bold;
					color: #fe642b;
				}
				.p-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				.item-c {
					max-width: 90%;
					display: block;
					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
					word-break: break-all;
				}
				.item-u {
					font-size: 22rpx;
					color: #333333;
					font-weight: 500;
					margin-left: 10rpx;
				}
				.item-bottom {
					border-radius: 0px 0px 20rpx 20rpx;
					padding: 30rpx;
					border-top: 1rpx solid #E7E7E7;
					.btn{
						width: 170rpx;
						height: 66rpx;
						background: #E4EEFF;
						border: 2rpx solid #446CB2;
						border-radius: 33rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #446CB2;
						line-height: 66rpx;
						text-align: center;
					}
					.btn-1{
						width: 191rpx;
						border: 2rpx solid $uni-color-bg;
						background-color: #fff;
						color: $uni-color-bg;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		bottom: 100rpx;
		left: 0;
		width: 100%;
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
